<template>
    <div>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
           finished-text="没有更多了"
           @load="onLoad"
           offset="50">
         <artilitem v-for="(item) in list" :key="item.art_id" :item="item" 
         @dislikev='dislikefn'
         @dislikevv='dislikenfnn' :isshow='true' @click.native="tiaozhuan(item.art_id)"></artilitem>
         <div v-if="list.length==0" class="kong"></div>
        </van-list>
    </van-pull-refresh>
    </div>
</template>

<script>
import artilitem from '@/components/artilitem'
import {getarrlistApi,articleDislikeAPI,reportApi} from '@/api/index.js'
import { Notify } from 'vant';
export default {
  mounted(){
      
  },
  components:{artilitem},
  data(){
    return {
      list:[],  //默认频道列表内容
      loading:false,  //上拉底部加载状态
      finished:false,  //上拉底部完成状态
      theTime:new Date().getTime() , //用于请求文章内容的时间戳
      isLoading: false, //用于下拉刷新的状态
    }
  },
  props:['changeid','id'],
  created(){ //在组件第一次渲染的时候获取频道列表内容
    this.getarrlist()
  },
  methods:{
   async getarrlist(){//专门用来发送请求的函数
        const req2=await getarrlistApi({channel_id:this.changeid,
                                        timestamp: this.theTime})
         //下一篇开头文章的事件戳
         //第一次加载 系统返回0-9条文章的内容,并且返回了第10条的时间戳
         //第二次用到上次的时间戳告诉后台从第10条文章内容开始返回数据,并且此次会返回第20条的时间戳 依次类推
        this.list=[...this.list,...req2.data.data.results]  //将数组进行依次合并
        this.theTime=req2.data.data.pre_timestamp   //重置theTime的时间戳,将他设置为下一页数据的时间戳

        this.loading=false  //加载完毕就将loading设置为false,如果不关闭底部一直是加载状态
        if(req2.data.data.pre_timestamp == null){  //如果pre_timestamp没有值则说明没有更多的数据了,所以就将finished设置为true,表示数据全部加载完毕
            this.finished=true
         }
   },
  onLoad(){ //因为这个组件初始化会默认滚动到底一次,所以判断list有没有数据,如果没有就退出函数,这样做主要是避免跟created函数里面的获取频道内容重复
       if(this.list.length==0){
          return  //如果页面没有数据,没有高度就直接退出函数不让他获取数据
       }
       if(this.changeid==this.id){  //防止其他组件也滚动到底进行获取请求,所以进行一个判断,只获取当前组件的更多数据
         this.getarrlist()
       }
     },
    async onRefresh(){//下拉刷新的执行函数
         this.list=[]  //将list置空
         this.theTime=new Date().getTime()  //将时间戳也置空
         await this.getarrlist()  //重新发起请求
         this.isLoading = false; //刷新成功将isLoading设置为fasle
      },
     async dislikefn(id){  //父组件向子组件传的函数,子组件用来触发此函数传递参数
       try {
           await articleDislikeAPI(id)
         //如果响应成功,await就正常放行
         Notify({ type: 'success', message: '反馈成功' });
           for(let i=0;i<this.list.length;i++){ //利用点击文字的id和总文章列表里面的每个id进行对比
                if(this.list[i].art_id==id){ //如果相等 就将他删除即可
                    this.list.splice(i,1);
                    return
                }
           }
       } catch (error) {
            console.log(error);
       }
      },
     async dislikenfnn(id,type){  //父组件向子组件传的函数,子组件用来触发此函数传递进来参数
       try {
          await reportApi({id,type})
          //如果响应成功,await就正常放行
          Notify({ type: 'success', message: '举报成功' });
       } catch (error) {
           console.log(error);
       }
      },
      tiaozhuan(id){ //文章跳转详情页点击事件
          this.$router.push({
            path:`/articledetail?id=${id}`,
          })
      }
  }
}
//List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
//此时可以发起异步操作并更新数据，数据更新完毕后，
//将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
</script>

<style scoped lang="less">
.kong{
  height: 300px;
  width: 100vh;
}
</style>